<template>
	<h-dark :title="t('pwd.titleBind')"></h-dark>
	<view class="bg-white min-h-full flex flex-col items-center px-[40rpx] pt-[120rpx] box-border">
		<view>
			<u-image src="../../static/images/login/register-bg.png" mode="widthFix" height="260" width="260" />
		</view>
		<view class="w-full">
			<u-form :border-bottom="false" :label-width="150" label-position="top">
				<u-form-item :border-bottom="false" :label="t('pwd.mobile')" :required="true">
					<u-picker class="max-w-[750px]" mode="selector" v-model="picker_show"
						:default-selector="[country_code.default_select]" :range="country_code.list"
						@confirm="handlePicker" :confirm-text="t('common.confirm')" :cancel-text="t('common.cancel')">
					</u-picker>
					<view class="mr-[20rpx]" @click="picker_show=true">
						<text class="mr-[10rpx]">{{formData.country_code}}
						</text>
						<u-icon name="arrow-down" size="20"></u-icon>
					</view>
					<u-input class="flex-1" v-model="formData.mobile" :border="false"
						:placeholder="t('pwd.mobilePlaceholder')" />
				</u-form-item>
				<u-form-item :border-bottom="false" :label="t('captcha.captcha')" :required="true">
					<u-input class="flex-1" v-model="formData.code" :placeholder="t('captcha.captchaPlaceholder')"
						:border="false" />
					<view class="border-l border-solid border-0 border-light pl-3 text-muted leading-4 ml-3 w-[180rpx]"
						@click="sendSms">
						<u-verification-code ref="uCodeRef" :seconds="60" @change="codeChange"
							:change-text="t('captcha.changeText')" :startText="t('captcha.startText')"
							:endText="t('captcha.endText')" />
						<text :class="formData.mobile ? 'text-primary' : 'text-muted'">
							{{ codeTips }}
						</text>
					</view>
				</u-form-item>
			</u-form>
			<view class="mt-[40rpx]">
				<u-button type="primary" shape="circle" @click="handleConfirm"> {{t('common.confirm')}} </u-button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { userBindMobile } from '@/api/user'
	import { smsSend, getCountryCode } from '@/api/app'
	import { SMSEnum } from '@/enums/appEnums'
	import { reactive, ref, shallowRef } from 'vue'
	import { useUserStore } from '@/stores/user'
	import { t } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('pwd.titleBind') })
	const uCodeRef = shallowRef()
	const codeTips = ref('')

	const userStore = useUserStore()
	const codeChange = (text : string) => {
		codeTips.value = text
	}

	const formData = reactive({
		type: 'bind',
		mobile: '',
		code: '',
		country_code: ''
	})

	const picker_show = ref(false)
	const country_code = reactive<{
		list : any[]
		default_select : number
	}>({
		list: [],
		default_select: 0
	})
	const getData = async () => {
		let data = await getCountryCode()
		country_code.list = data;
		formData.country_code = data[0]
	}
	const handlePicker = (index : number) => {
		country_code.default_select = index;
		formData.country_code = country_code.list[index];
	}

	const sendSms = async () => {
		if (!formData.mobile) return uni.$u.toast(t('captcha.mobileEmpty'))
		if (uCodeRef.value?.canGetCode) {
			await smsSend({
				scene: SMSEnum.BIND_MOBILE,
				mobile: formData.mobile,
				country_code: formData.country_code
			})
			uni.$u.toast(t('captcha.sendSuccessfully'))
			uCodeRef.value?.start()
		}
	}
	const handleConfirm = async () => {
		if (!formData.mobile) return uni.$u.toast(t('captcha.mobileEmpty'))
		if (!formData.code) return uni.$u.toast(t('captcha.captchaEmpty'))
		await userBindMobile(formData, { token: userStore.temToken })
		uni.$u.toast(t('pwd.bindSuccess'))
		userStore.login(userStore.temToken!)
		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/index/index'
			})
		}, 1500)
	}

	getData()
</script>

<style lang="scss">
	page {
		height: 100%;
	}
</style>